<!--
 * @作者: kerwin
 * @公众号: 大前端私房菜
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>home：用原生JS测试graphql</h1>

    <button onclick="getData()">查询数据</button>
    <button onclick="getDataOne()">查询指定数据</button>
    <button onclick="createData()">创建数据</button>
    <button onclick="updateData()">更新数据</button>
    <button onclick="deleteData()">删除数据</button>

    <script>
        // 查询所有
        function getData() {
            // graphql描述
            const myquery = `
            query {
                getNowplayingList {
                    id,
                    name,
           
                }
            }
            `
            // 用原生fetch
            fetch("/graphql", {
                // 要按照post请求发
                method: "POST",
                headers: {
                    "Content-Type": "application/json", // 传JSON格式
                    "Accept": "application/json" // 接收的也是JSON格式
                },
                body: JSON.stringify({
                    // query字段是固定的，对应的值是graphql参数格式
                    query: myquery
                })
                // fetch获取数据的方法：链式调用，需要先json()对数据转换
            }).then(res => res.json()).then(res => {
                console.log(res.data.getNowplayingList)
            })
        }

        // 查询指定的
        function getDataOne() {
            // query后可以添加接收参数的名为id（前面需要加$，固定写法），类型对应后端的String!类型
            // getNowplayingList后可以接收id，该id的值为query收到的$id
            const myquery = `
            query ($id:String!){
                getNowplayingList(id:$id) {
                    id,
                    name,

                }
            }
            `
            // 也可以这样写
            // const myquery = `
            // query getNowplayingList($id:String!){
            //     getNowplayingList(id:$id) {
            //         id,
            //         name,

            //     }
            // }
            // `
            // 用原生fetch
            fetch("/graphql", {
                // 要按照post请求发
                method: "POST",
                headers: {
                    "Content-Type": "application/json", // 传JSON格式
                    "Accept": "application/json" // 接收的也是JSON格式
                },
                body: JSON.stringify({
                    // query字段是固定的，对应的值是graphql参数格式
                    query: myquery,
                    // variables固定字段，接收一个对象，对象内是需要传的内容
                    // id这个key对应的是myquery中$id

                    variables: {
                        // 这个id是写死的，用于测试
                        // 若ID失效，去数据库查看任一条数据的ID进行替换即可
                        id: "62bc16e8918ac61b4cddd9ee"
                    }
                })
                // fetch获取数据的方法：链式调用，需要先json()对数据转换
            }).then(res => res.json()).then(res => {
                console.log(res.data.getNowplayingList)
            })
        }

        // 创建
        function createData() {
            // mutation后跟接收参数名为input（需要加$，固定写法），类型对应后端的FilmInput类型
            // createFilm后可以接收input，该input的值为mutation收到的$input
            const myquery = `
            mutation ($input:FilmInput){

                createFilm(input:$input) {
                    id,
                    name
                }
            }
            `
            fetch("/graphql", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                body: JSON.stringify({
                    query: myquery,
                    // variables固定字段，接收一个对象，对象内是需要传的内容
                    // input这个key对应的是myquery中$input
                    variables: {
                        input: {
                            name: "创建啦",
                            price: 60,
                            poster: "http://6666"
                        }
                    }
                })
            }).then(res => res.json()).then(res => {
                console.log(res.data.createFilm)
            })
        }
        // 更新
        function updateData() {
            const myquery = `
            mutation ($id:String!,$input:FilmInput){

                updateFilm(id:$id,input:$input) {
                    id,
                    name
                }
            }
            `
            fetch("/graphql", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                body: JSON.stringify({
                    query: myquery,
                    variables: {
                        // 这个id是写死的，用于测试
                        // 若ID失效，去数据库查看任一条数据的ID进行替换即可
                        id: "62bc2154abb8d331a0afb652",
                        input: {
                            name: "6666-修改",
                            price: 66,
                            poster: "http://6666-修改"
                        }
                    }
                })
            }).then(res => res.json()).then(res => {
                console.log(res.data.updateFilm)
            })
        }
        // 删除
        function deleteData() {
            const myquery = `
            mutation ($id:String!){

                deleteFilm(id:$id)
            }
            `
            fetch("/graphql", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                body: JSON.stringify({
                    query: myquery,
                    variables: {
                        // 这个id是写死的，用于测试
                        // 若ID失效，去数据库查看任一条数据的ID进行替换即可
                        id: "62bc2154abb8d331a0afb652"
                    }
                })
            }).then(res => res.json()).then(res => {
                console.log(res.data)
            })
        }
    </script>
</body>

</html>